<template>
    <view class="flex min-h-screen flex-col justify-between bg-primary text-gray-100">
        <!-- 注册表单 -->
        <main class="flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
            <view class="w-full max-w-md space-y-8">
                <view class="text-center">
                    <h2 class="mt-6 text-3xl font-bold">创建您的账户</h2>
                    <p class="mt-2 text-gray-400">开始您的电影之旅</p>
                </view>

                <view class="rounded-lg bg-secondary p-8 shadow-xl">
                    <form class="mt-8 space-y-6" action="#" method="POST" @submit="handleRegisterSubmit">
                        <view class="space-y-4 rounded-md shadow-sm">
                            <view>
                                <label for="username" class="mb-1 block text-sm font-medium">用户名</label>
                                <view class="relative">
                                    <input
                                        id="username"
                                        name="username"
                                        type="text"
                                        required
                                        class="relative block w-full rounded-md border border-gray-600 bg-gray-700 px-4 py-2 placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent"
                                        placeholder="您的用户名" />
                                    <view class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg
                                            class="h-5 w-5 text-gray-400"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </view>
                                </view>
                            </view>

                            <!-- <view>
                                <label for="email" class="mb-1 block text-sm font-medium">电子邮箱</label>
                                <view class="relative">
                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        required
                                        class="relative block w-full rounded-md border border-gray-600 bg-gray-700 px-4 py-2 placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent"
                                        placeholder="your@email.com"
                                    />
                                    <view class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg
                                            class="h-5 w-5 text-gray-400"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor"
                                        >
                                            <path
                                                d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
                                            />
                                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                        </svg>
                                    </view>
                                </view>
                            </view> -->

                            <view>
                                <label for="password" class="mb-1 block text-sm font-medium">密码</label>
                                <view class="relative">
                                    <input
                                        id="password"
                                        name="password"
                                        type="password"
                                        required
                                        class="relative block w-full rounded-md border border-gray-600 bg-gray-700 px-4 py-2 placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent"
                                        placeholder="••••••••" />
                                    <view class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg
                                            class="h-5 w-5 text-gray-400"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </view>
                                </view>
                                <p class="mt-1 text-xs text-gray-500">密码至少8个字符，包含字母和数字</p>
                            </view>

                            <view>
                                <label for="confirmPassword" class="mb-1 block text-sm font-medium">确认密码</label>
                                <view class="relative">
                                    <input
                                        id="confirmPassword"
                                        name="confirmPassword"
                                        type="password"
                                        required
                                        class="relative block w-full rounded-md border border-gray-600 bg-gray-700 px-4 py-2 placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent"
                                        placeholder="••••••••" />
                                    <view class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg
                                            class="h-5 w-5 text-gray-400"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </view>
                                </view>
                            </view>

                            <!-- <view class="flex items-start">
                                <view class="flex h-5 items-center">
                                    <input
                                        id="terms"
                                        name="terms"
                                        type="checkbox"
                                        required
                                        class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-accent focus:ring-accent" />
                                </view>
                                <view class="ml-3 text-sm">
                                    <label for="terms" class="font-medium text-gray-300">
                                        我同意FilmHub的
                                        <a href="#" class="text-accent hover:underline">服务条款</a>
                                        和
                                        <a href="#" class="text-accent hover:underline">隐私政策</a>
                                    </label>
                                </view>
                            </view> -->
                        </view>

                        <view class="mt-12">
                            <button
                                form-type="submit"
                                class="group relative flex w-full justify-center rounded-md border border-transparent bg-accent px-4 py-2 text-sm font-medium text-white transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2">
                                注册
                            </button>
                        </view>
                    </form>

                    <view class="mt-6">
                        <view class="relative">
                            <view class="absolute inset-0 flex items-center">
                                <view class="w-full border-t border-gray-600"></view>
                            </view>
                            <view class="relative flex justify-center text-sm">
                                <span class="bg-secondary px-2 text-gray-400">已有账户?</span>
                            </view>
                        </view>

                        <view class="mt-4">
                            <a
                                href="/login"
                                class="flex w-full justify-center rounded-md border border-gray-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2">
                                登录现有账户
                            </a>
                        </view>
                    </view>
                </view>
            </view>
        </main>
    </view>
</template>

<script setup lang="ts">
import { registerAPI } from "@/api";

const handleRegisterSubmit = async (e: any) => {
    const { username, password, confirmPassword } = e.detail.value;

    if (password !== confirmPassword) {
        uni.showToast({
            title: "两次输入的密码不一致",
            icon: "none",
            duration: 2000
        });
        return;
    }

    await registerAPI(username, password);
    uni.showToast({
        title: "注册成功",
        icon: "none"
    });
    uni.navigateTo({
        url: "/pages/login/login"
    });
};
</script>

<style lang="scss" scoped>
input {
    height: 50px;
}
.auth-container {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
}

.input-field {
    transition: all 0.2s ease;
}

.input-field:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.social-btn {
    transition: all 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.auth-link {
    transition: all 0.2s ease;
}

.auth-link:hover {
    color: #000;
}
</style>
